<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="../../styles/common.css"/>
    <link rel="stylesheet" href="../../styles/page.css"/>
</head>
<body>
<!-- ECharts等组件单文件引入 -->
<script src="../../plugins/echart/echarts.js"></script>
<script src="../../plugins/vue/vue.js"></script>
<script src="../../plugins/axiosAll/axios.js"></script>

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="Echart" style="height:800px"></div>
<script>
    new Vue({
        el: "#Echart",
        data() {
            return {
                countByMonth: []
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
                axios.get("/data/countByMonth").then(resp => {
                    console.log(resp.data);
                    if (resp.data.code == 1) {
                        for (let i = 0; i < resp.data.data.length; i++) {
                            this.countByMonth[i] = resp.data.data[i].num;
                        }
                        this.echartData();
                        this.$message.success("数据加载成功！")
                    }else {

                    }
                });
            },
            echartData(){
                // 基于准备好的dom，初始化echarts图表
                var myChart = echarts.init(document.getElementById('Echart'));
                var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data: ['外卖销量']
                    },
                    title: {
                        text: '外卖统计',
                        subtext: '数据来源:WeChatGakkiToStr.com',
                        left: 'center',
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['January','February','March','April','May','June','July','August','September','October','November','December']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                        },
                    ],
                    series: [
                        {
                            "name": "销量",
                            "type": "bar",
                            "data": this.countByMonth
                        }
                    ]
                };

                // 为echarts对象加载数据
                myChart.setOption(option);

                //图表自适应屏幕
                window.addEventListener("resize",function (){
                    myChart.resize();});
            }
        }
    })
    </script>


</body>
</html>